<template>
  <view>
    <!-- 腾讯地图 -->
    <map id="map" :show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale"
      @regionchange="bindregionchange" :style="{ width: mapw, height: maph }"></map>
    <!-- 定位图标 -->
    <view class="controls-icon" @click="bindControlTap">
      <image src="../../static/gym_icons/gps.svg" />
    </view>
  </view>
</template>

<script>
  // 腾讯地图 SDK
  import QQMapWX from '../../libs/qqmap-wx-jssdk.js'
  const key = '5K4BZ-PHB3W-JKIR2-3CC3D-CCO3V-5FFH6'
  export default {
    markIndex: 0,
    mapCtx: null,
    data() {
      return {
        mapw: '100%', // 地图宽度
        maph: '0', // 地图高度
        scale: '18', // 缩放
        longitude: null, // 地图中心点经度
        latitude: null, // 地图中心点纬度
        markers: null, // 标记点
      };
    },
    mounted() {
      this.qqmapsdk = new QQMapWX({
        key: key
      })
    },
    onLoad() {
      this.mapCtx = uni.createMapContext('map')
      // 获取窗口的宽度和高度
      uni.getSystemInfo({
        success: res => {
          var mapw = res.windowWidth // 宽度
          var maph = res.windowHeight // 高度
          this.maph = maph + 'px'
        }
      })
    },
    onReady() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.longitude = res.longitude,
            this.latitude = res.latitude
        }
      })
    },
    methods: {
      getGym(longitude, latitude) {
        // 调用接口
        this.qqmapsdk.search({
          keyword: '健身运动', // 搜索关键词
          location: { // 设置周边搜索中心点
            longitude: longitude,
            latitude: latitude
          },
          success: res => {
            var mark = []
            // 返回查找结果
            for (let i in res.data) {
              mark.push({
                iconPath: '../../static/gym_icons/gym.svg',
                width: 25,
                height: 25,
                id: +i,
                latitude: res.data[i].location.lat,
                longitude: res.data[i].location.lng
              })
            }
            mark.push({
              iconPath: '../../static/gym_icons/positioning.svg',
              width: 20,
              height: 20,
              id: res.data.length,
              latitude: latitude,
              longitude: longitude
            })
            // 将搜索结果显示在地图上
            this.markers = mark
          }
        })
      },

      // 单击控件，返回中心位置
      bindControlTap(e) {
        this.mapCtx.moveToLocation()
      },
      bindregionchange(e) {
        if (e.type === 'end') {
          this.mapCtx.getCenterLocation({
            success: res => {
              this.getGym(res.longitude, res.latitude)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .controls-icon {
    position: fixed;
    height: 80rpx;
    width: 80rpx;
    bottom: 20rpx;
    right: 20rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }
</style>